<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 订单管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center">
                  <template slot-scope="scope">{{ getCurrentIDX(scope.$index + 1)}}</template>
                </el-table-column>
                <el-table-column prop="user_name" label="下单姓名"></el-table-column>
				<el-table-column prop="amount" label="商品总价"></el-table-column>
                <el-table-column prop="area" label="收获地址"></el-table-column>
                <el-table-column label="审核状态" align="center">
                    <template slot-scope="scope">
                        <el-tag
                        :type="scope.row.status==='已审核'?'success':(scope.row.status==='未审核'?'danger':'')"
                        >{{scope.row.status}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phone_number" label="联系方式"></el-table-column>
                <el-table-column prop="create_time" label="下单时间"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :open-delay="500" content="审核订单" placement="bottom" :enterable="false">
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        circle
                        @click="checkOrderById(scope.row.id)"
                        :disabled='checkStatus(scope.row.status)'
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" :open-delay="500" content="查看明细" placement="bottom" :enterable="false">
                      <el-button
                        type="success"
                        size="mini"
                        icon="el-icon-location"
                        circle
                        @click="showOrderDetailById(scope.row.id)"
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" :open-delay="500" content="删除订单" placement="bottom" :enterable="false">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        circle
                        @click="removeOrderById(scope.row.id)"
                      ></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
<!--              small-->
                <el-pagination
                  background
                  layout="total, prev, pager, next"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :total="pageTotal"
                  @current-change="handlePageChange">
                </el-pagination>
            </div>
        </div>

        <!-- 展示物订单详情对话框 -->
        <el-dialog title="查看订单详情" :visible.sync="detailVisible" width="50%">
        <!-- 订单详情 -->
        <el-table :data="detailData"  height="250" border style="width: 100%">
<!--          <el-table-column label="图片" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <img :src="scope.row.img_url" width="50" height="50" />-->
<!--            </template>-->
<!--          </el-table-column>-->
            <el-table-column prop="name" label="食品名" width="300">
            </el-table-column>
            <el-table-column prop="promote_price" label="单价 (单位:元)">
            </el-table-column>
            <el-table-column prop="number" label="购买数量">
            </el-table-column>
          </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
import provinceAndCity from '@/assets/province.json'
const statusOption = [
  {key: 1, value: '未审核'},
  {key: 2, value: '已审核'}
]

// 用户姓名
const userNameValidate = (rule, value, callback) => {
  const reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s\-]{2,6}$/
  if (value === undefined || value === '') {
    callback(new Error('姓名不能为空'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入2-6个汉字！'))
  } else {
    callback()
  }
}
// 电话号码
const tellValidate = (rule, value, callback) => {
  const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
  if (value === undefined || value === '') {
    callback(new Error('电话不能为空'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入正确的电话号码'))
  } else {
    callback()
  }
}
export default {
    name: 'ordertable',
    data() {
        return {
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 20
            },
            tableData: [],
            detailData: [],
            delList: [],
            detailVisible: false,
            pageTotal: 0,
            statusOption,
            idx: -1,
            id: -1,
            // 表单验证提示
            rules: {
              user_name: [{ validator: userNameValidate, trigger: 'blur'}],
              phone_number: [{ validator: tellValidate, trigger: 'blur' }]
            },
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取每条数据的序号
        getCurrentIDX(index) {
          return (this.query.pageIndex - 1) * this.query.pageSize + index
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            const _this=this
            this.$http.get("/orderList/getAllOrderInfo/"+_this.query.pageIndex+"/"+_this.query.pageSize)
              .then(res => {
                this.tableData = res.data.data;
                this.pageTotal = res.data.data[0].total;
              });
        },
        // 审核订单
        checkOrderById(id) {
          const _this = this
          this.$confirm('确定审核？', '提示', {
            type: 'warning'
          }).then(() => {
            this.$http.put("/orderList/updateStatusById/"+ id)
              .then(resp => {
                _this.getData()
              });
          });
        },
        checkStatus(status) {
        if (status === '已审核') {
          return true
        } else if (status === '未审核') {
          return false
        }
      },
        //展示订单详情
        showOrderDetailById (id) {
          this.detailVisible = true;
          const _this = this
          this.$http.get('/orderList/getProductInfoById/' + id)
            .then(resp => {
              _this.detailData = resp.data.data;
            }).catch(err => {
              _this.$message.error("获取订单信息失败")
              return false
            })
        },

        //删除订单
        removeOrderById (id) {
          const _this = this
          this.$confirm('确定要删除吗？','提示', { type: 'error' })
            .then(() => {
              //删除订单
              this.$http.delete('/orderList/delOrder/'+ id)
                .then(resp => {
                  if (resp.data.code === 200) {
                    _this.getData();
                    _this.$message.success("删除成功")
                    return true
                  } else {
                    _this.$message.error("删除失败")
                  }
                }).catch(err => {
                  _this.$message.error("删除失败")
                  return false
                })
            });
        },
        // 多选操作
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 批量删除
        delAllSelection() {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            const order = this.multipleSelection[i]
            if (i < this.multipleSelection.length - 1) {
              this.$http.delete('/orderList/delOrder/' + order.id)
            } else {
              this.$http.delete('/orderList/delOrder/' + order.id)
                .then(res => {
                  this.getData()
                  this.multipleSelection = [];
                  this.$message.success("删除成功");
                  return true
                })
            }
          }
        },

        // 还没测试
        // 分页
        handlePageChange(val) {
          this.$set(this.query, 'pageIndex', val);
          this.getData();
        },

    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.dialog-form>>>div.el-dialog__header {
  border-bottom: 1px solid #cfcfcf;
}
.itemRequired>>>label.el-form-item__label::before {
  content: '* ';
  color: #F56C6C;
  margin-right: 2px;
}
</style>
